<template>
    <div>
        <el-table :data="data" stripe style="width: 100%">
            <el-table-column prop="username" label="账号" />
            <el-table-column prop="realname" label="姓名" />
            <el-table-column prop="region" label="地区" />
            <el-table-column prop="cdata" label="创建日期" />
            <el-table-column label="操作">
                <template #default >
                    <el-button link type="primary" size="small"  @click="userAdd">用户授权</el-button>
                    <el-button link type="primary" size="small" @click="changePassword">修改密码</el-button>
                    <el-button link type="primary" size="small" @click="resetPassword">重置密码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="50" @current-change="changePage" :current-page="page" />

          <!-- 弹出层2 -->
          <userpassword :userShow="userShow" :changPwd="changPwd" :resetPwd="resetPwd" @setUser="setUser" @setCP="setCP" @setRP="setRP" />
    </div>
</template>

<script setup lang="ts">

import userpassword from "./userpassword.vue";
import {ref} from "vue"
import type { orderListType } from "@/typings/orderType"
import { SelectProps } from "element-plus/es/components/select-v2/src/defaults";
interface IProps {
    data: orderListType[]
    total: number
    loadData: (page: number) => void
    page:number
}

const props = defineProps<IProps>()

//  给分页器添加点击换页后的事件
const changePage = (page:number) =>{
    props.loadData(page)
}

//  用户授权
const userShow = ref(false)
const setUser= (v:boolean) =>{
    userShow.value = v
}
const userAdd =() =>{
    setUser(true)
}
//  修改密码
const changPwd = ref(false)
const setCP = (v:boolean) =>{
    changPwd.value= v
}
const changePassword =() =>{
    setCP(true)
}

//  重置密码
const resetPwd = ref(false)
const setRP=(v:boolean)=>{
    resetPwd.value = v
}
const resetPassword =() => {
    setRP(true)
}


</script>

<style lang="scss" scoped></style>